<template>
	<div>
		<h2>{{title}}</h2>
		<Tabbar></Tabbar>
		<p>----------------------------------------------</p>
		<button @click="tofu">跳到父组件</button>
		<button @click="tolist">tolist</button>
		<button @click="todetail">todetail</button>
		<p>-------------------children----------------------</p>
		<router-view></router-view>
		<p>-------------------vuex(store)-------------------</p>
		<p>store的text:{{$store.state.text}}</p>
		<ul>
			<li v-for="item in $store.state.list" :key="item.id">
				{{item.id}}---------{{item.name}}
			</li>
		</ul>
		<p>store的getters:{{$store.getters.reverseText}}</p>
		<button @click="chagetext">修改text1的数据</button>
		<p>{{$store.state.timer}}</p>
	</div>
</template>

<script>
	import Tabbar from "../components/Tabbar.vue"
	export default{
		components:{
			Tabbar,
		},
		data(){
			return {
				title:"index内容"
			}
		},
		methods:{
			tofu:function(){
				this.$router.push("/fu");
			},
			tolist:function(){
				this.$router.push("/list");
			},
			todetail:function(){
				this.$router.push("/detail");
			},
			chagetext:function(){
				this.$store.commit("cgtext","这是改之后的文字")
			}
		},
		created:function(){
			let user={
				name:8023,
				islogin:false
			}
			localStorage.setItem("user",JSON.stringify(user))
			// 
			setInterval(()=>{
				this.$store.dispatch("changeTimer",1)
			},1000)
		}
		
	}
</script>

<style>
</style>
